<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <title>饿了么 首页</title>
</head>
<body>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- 顶部应用栏 -->
        <header class="mdc-top-app-bar">
            <div class="mdc-top-app-bar__row">
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                    <div class="address-selector">
                        <div class="current-address">
                            <i class="material-icons">location_on</i>
                            <span class="address-text">天津大学（北洋园校区）</span>
                            <i class="material-icons">expand_more</i>
                        </div>
                    </div>
                </section>
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
                    <span class="practice-text">（前端开发实践）</span>
                </section>
            </div>
        </header>

        <!-- 搜索栏 -->
        <div class="search-container">
            <div class="search-input">
                <i class="material-icons">search</i>
                <input type="text" placeholder="搜索饿了么商家、商品名称" readonly>
            </div>
        </div>

        <!-- 分类导航 -->
        <div class="category-container">
            <div class="category-grid">
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl01.png" alt="美食"></div>
                    <span class="category-name">美食</span>
                </div>
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl02.png" alt="早餐"></div>
                    <span class="category-name">早餐</span>
                </div>
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl03.png" alt="跑腿代购"></div>
                    <span class="category-name">跑腿代购</span>
                </div>
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl04.png" alt="汉堡披萨"></div>
                    <span class="category-name">汉堡披萨</span>
                </div>
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl05.png" alt="甜品饮品"></div>
                    <span class="category-name">甜品饮品</span>
                </div>
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl06.png" alt="速食简餐"></div>
                    <span class="category-name">速食简餐</span>
                </div>
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl07.png" alt="地方小吃"></div>
                    <span class="category-name">地方小吃</span>
                </div>
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl08.png" alt="米粉面馆"></div>
                    <span class="category-name">米粉面馆</span>
                </div>
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl09.png" alt="包子粥铺"></div>
                    <span class="category-name">包子粥铺</span>
                </div>
                <div class="category-item" onclick="location.href='businessList.html'">
                    <div class="category-icon"><img src="img/dcfl10.png" alt="炸鸡炸串"></div>
                    <span class="category-name">炸鸡炸串</span>
                </div>
            </div>
        </div>

        <!-- 促销横幅 -->
        <div class="promo-banner">
            <div class="promo-content">
                <h3>品质套餐</h3>
                <p>搭配齐全吃得好</p>
                <button class="mdc-button mdc-button--raised">
                    <span class="mdc-button__label">立即抢购</span>
                    <i class="material-icons">arrow_forward</i>
                </button>
            </div>
        </div>

        <!-- 会员卡片 -->
        <div class="member-card">
            <div class="member-content">
                <div class="member-info">
                    <img src="img/super_member.png" alt="超级会员">
                    <div class="member-text">
                        <h3>超级会员</h3>
                        <p>每月享超值权益</p>
                    </div>
                </div>
                <button class="mdc-button mdc-button--outlined">
                    <span class="mdc-button__label">立即开通</span>
                    <i class="material-icons">arrow_forward</i>
                </button>
            </div>
        </div>

        <!-- 推荐商家 -->
        <div class="recommend-section">
            <div class="section-header">
                <div class="divider"></div>
                <h2>推荐商家</h2>
                <div class="divider"></div>
            </div>

            <!-- 筛选选项 -->
            <div class="filter-options">
                <button class="mdc-button mdc-button--text">
                    <span class="mdc-button__label">综合排序</span>
                    <i class="material-icons">expand_more</i>
                </button>
                <button class="mdc-button mdc-button--text">距离最近</button>
                <button class="mdc-button mdc-button--text">销量最高</button>
                <button class="mdc-button mdc-button--text">
                    <i class="material-icons">filter_list</i>
                    <span class="mdc-button__label">筛选</span>
                </button>
            </div>

            <!-- 商家列表 -->
            <div class="business-list">
                <div class="business-card" onclick="location.href='businessInfo.html'">
                    <img src="img/sj01.png" alt="万家饺子（软件园E18店）" class="business-image">
                    <div class="business-info">
                        <div class="business-header">
                            <h3>万家饺子（软件园E18店）</h3>
                            <i class="material-icons favorite-icon">favorite_border</i>
                        </div>
                        <div class="business-rating">
                            <div class="rating-stars">
                                <i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star_half</i>
                            </div>
                            <span class="rating-text">4.9 月售 345 单</span>
                            <span class="delivery-tag">蜂鸟专送</span>
                        </div>
                        <div class="business-delivery">
                            <span>¥15起送 | ¥3配送</span>
                            <span>3.22km | 30分钟</span>
                        </div>
                        <div class="business-tags">
                            <span class="tag">各种饺子</span>
                        </div>
                        <div class="business-promotions">
                            <div class="promotion-item">
                                <span class="promotion-tag new">新</span>
                                <span class="promotion-text">饿了么新用户首单立减 9 元</span>
                            </div>
                            <div class="promotion-item">
                                <span class="promotion-tag special">特</span>
                                <span class="promotion-text">特价商品 5 元起</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="business-card" onclick="location.href='businessInfo.html'">
                    <img src="img/sj02.png" alt="川湘居（软件园店）" class="business-image">
                    <div class="business-info">
                        <div class="business-header">
                            <h3>川湘居（软件园店）</h3>
                            <i class="material-icons favorite-icon">favorite_border</i>
                        </div>
                        <div class="business-rating">
                            <div class="rating-stars">
                                <i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star_half</i>
                            </div>
                            <span class="rating-text">4.8 月售 289 单</span>
                            <span class="delivery-tag">蜂鸟专送</span>
                        </div>
                        <div class="business-delivery">
                            <span>¥20起送 | ¥4配送</span>
                            <span>2.5km | 30分钟</span>
                        </div>
                        <div class="business-tags">
                            <span class="tag">川湘菜</span>
                        </div>
                        <div class="business-promotions">
                            <div class="promotion-item">
                                <span class="promotion-tag new">新</span>
                                <span class="promotion-text">饿了么新用户首单立减 9 元</span>
                            </div>
                            <div class="promotion-item">
                                <span class="promotion-tag special">特</span>
                                <span class="promotion-text">特价商品 5 元起</span>
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="business-card" onclick="location.href='businessInfo.html'">
                    <img src="img/sj03.png" alt="粤式茶餐厅" class="business-image">
                    <div class="business-info">
                        <div class="business-header">
                            <h3>粤式茶餐厅</h3>
                            <i class="material-icons favorite-icon">favorite_border</i>
                        </div>
                        <div class="business-rating">
                            <div class="rating-stars">
                                <i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star_half</i>
                            </div>
                            <span class="rating-text">4.7 月售 256 单</span>
                            <span class="delivery-tag">蜂鸟专送</span>
                        </div>
                        <div class="business-delivery">
                            <span>¥25起送 | ¥5配送</span>
                            <span>3.8km | 40分钟</span>
                        </div>
                        <div class="business-tags">
                            <span class="tag">粤菜</span>
                        </div>
                        <div class="business-promotions">
                            <div class="promotion-item">
                                <span class="promotion-tag new">新</span>
                                <span class="promotion-text">饿了么新用户首单立减 9 元</span>
                            </div>
                            <div class="promotion-item">
                                <span class="promotion-tag special">特</span>
                                <span class="promotion-text">特价商品 5 元起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <ul class="footer">
            <li class="active" onclick="location.href='index.html'">
                <i class="material-icons">home</i>
                <p>首页</p>
            </li>
            <li onclick="location.href='discover.html'">
                <i class="material-icons">explore</i>
                <p>发现</p>
            </li>
            <li onclick="location.href='orderList.html'">
                <i class="material-icons">receipt</i>
                <p>订单</p>
            </li>
            <li onclick="location.href='me.html'">
                <i class="material-icons">person</i>
                <p>我的</p>
            </li>
        </ul>
    </div>
    <script src="js/index.js"></script>
</body>
</html>
